<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-31 17:46:49
 * @LastEditTime: 2020-03-13 13:35:55
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/echarts.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style type="text/css">
        .van-search {
            /* background: transparent !important; */
            padding: 6px 0;
            border-bottom: 1px solid #ebedf0;
        }

        /* .van-search__content {
             background: transparent
         } */

        .van-search__action {
            color: #cd1b21;
            font-size: 13px;
            font-weight: 700;
        }

        .result {
            position: absolute;
            left: 0;
            top: 47px;
            bottom: 0;
            right: 0;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .mt {
            margin-top: 10px;
        }

        .border {
            border-right: 1px solid #ebedf0;
        }

        .label {
            line-height: 22px;
            text-align: center;
            font-weight: 500;
            font-size: 13px;
            color: #969799;
            padding: 8px 0;
        }

        .label .label-value {
            color: #3a3a3a;
            font-size: 14px;
        }

        .van-panel__header-value {
            color: #969799;
        }

        .un .van-panel__header-value {
            color: #cd1b21;
        }

        .van-cell__title {
            max-width: 90px;
        }

        .dis .van-cell__title {
            color: #9e9e9e;
        }

        /* .van-cell__value {
            text-align: right;
        } */

        .tab {
            overflow: hidden;
            position: absolute;
            left: 0;
            top: 0;
            width: 130px;
            padding-left: 10px;
            height: 47px;
            line-height: 55px;
            background: rgb(255, 255, 255);
            border-bottom: 1px solid #ebedf0;
        }

        .tab .t-d {
            font-size: 0;
            border-radius: 6px;
        }

        .tab .t-d>div {
            display: inline-block;
            width: 55px;
            text-align: center;
            height: 24px;
            font-size: 13px;
            border: 1px solid #cd1b21;
            line-height: 22px;
        }

        .tab .t-d>div.on {
            background: #cd1b21;
            color: #fff;
            line-height: 22px;
        }

        .total {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 50px;
            width: 100%;
            padding: 0 15px;
            line-height: 50px;
            font-size: 14px;
            background: #fff;
            box-shadow: 0 0 5px rgb(200, 198, 198);
        }

        .money {
            font-size: 16px;
            font-weight: 700;
            color: #cd1b21;
            margin-left: 15px;
        }

        .elp {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 200px;
        }

        .van-field__right-icon {
            position: absolute;
            top: -10px;
            right: 0;
            bottom: -10px;
            line-height: 44px;
            padding: 0 12px;
            background: #fff;
        }

        textarea {
            padding-right: 30px !important;
        }

        .van-field__control:disabled {
            color: #000000;
        }

        .van-cell {
            line-height: 30px;
        }

        .bc .van-cell__value {
            line-height: 0;
        }

        .van-cell__value {
            text-align: left;
        }

        .chart {
            height: 300px;
            background: #fff;
        }

        .title {
            padding: 15px;
            background: #fff;
            font-size: 18px;
            font-weight: 700;
        }

        .left {
            background: #fff;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full" @click="clickDom($event)">
            <van-nav-bar class="head" :title="name" left-arrow @click-left="onClickLeft">
                <div slot="right" class="head-right">
                    <!-- <span @click.stop="openNavigation">
                        <img src="../image/navigation.png" />
                    </span> -->
                    <span @click.stop="showMenu = !showMenu">
                        <img src="../image/menu.png" />
                    </span>
                </div>
            </van-nav-bar>
            <div class="body-no-bottom">
                <div class="content">
                    <van-cell title="客户名称" :value="customerData.A_ClientName || ''" class="dis"></van-cell>
                    <van-cell title="客户编号" :value="customerData.A_ClientCode || ''" class="dis"></van-cell>
                    <van-cell title="客户类别" :value="customerData.A_TrName || ''" class="dis"></van-cell>
                    <van-cell title="联系人" :value="customerData.A_LMan || ''" class="dis"></van-cell>
                    <van-cell title="联系方式" :value="customerData.A_Tel || ''" class="dis"></van-cell>
                    <van-cell title="详细地址" :value="customerData.A_Addr || ''" class="dis"></van-cell>
                    <van-cell title="是否停用" :value="customerData.A_Enabled || ''" class="dis"></van-cell>
                    <van-cell title="创建时间" :value="customerData.A_CRTTime || ''" class="dis"></van-cell>
                    <van-cell title="最近活跃时间" :value="customerData.A_BSNSDate || ''" class="dis"></van-cell>

                    <van-cell style="margin-top: 10px;" title="应收账款" :value="customerData.B_YSMoney || 0" class="dis">
                    </van-cell>
                    <van-cell title="押金" :value="customerData.B_YJMoney || 0" class="dis"></van-cell>
                    <van-cell title="铺货金额" :value="customerData.B_PHMoney || 0" class="dis"></van-cell>
                    <van-cell title="累计销售" :value="customerData.B_XSMoney || 0" class="dis"></van-cell>

                    <van-cell style="margin-top: 10px;" title="跟踪报告" :value="customerData.C_RPCont || ''" class="dis">
                    </van-cell>
                    <van-cell title="审批人" :value="customerData.RPTime || ''" class="dis"></van-cell>
                    <van-cell title="审批时间" :value="customerData.C_RPTime || ''" class="dis"></van-cell>

                    <div style="margin-top: 10px;">
                        <div class="title">历史销售信息</div>
                        <div class="chart" id="chart"></div>
                    </div>

                    <div style="margin:10px 0 20px 0">
                        <div class="title">客户登记信息</div>
                        <div class="left">
                            <van-cell v-for="row in djList">
                                <van-row>
                                    <van-col span="12">登记人员：{{row.Creater}}</van-col>
                                    <van-col span="12">登记时间：{{row.BDate}}</van-col>
                                    <van-col span="12">客户性质：{{row.ContA}}</van-col>
                                    <van-col span="12">信誉等级：{{row.ContB}}</van-col>
                                    <van-col span="12">下单操作人：{{(row.ContC == '其他' || row.ContC == '')?row.ContH:row.ContC}}</van-col>
                                    <van-col span="12">实际支付人：{{row.ContD == '其他'?row.ContI:row.ContD}}</van-col>
                                    <van-col span="12">物流要求：{{row.ContE == '指定物流'?row.ContF:row.ContE}}</van-col>
                                    <van-col span="12"><span style="vertical-align: top;">合同文件：</span><img @click="openBigImg(row.ConPIC)" :src="row.ConPIC?('http://' + serverIP + row.ConPIC):'../image/no.png'" style="width:80px;border-radius: 6px;" /></van-col>
                                    <van-col span="24" style="color:#9e9e9e;">{{row.CCont}}</van-col>
                                </van-row>
                            </van-cell>
                            <div v-if="!djList.length"
                                style="color: #999;text-align: center;font-size: 14px;padding: 10px;">暂无数据</div>
                        </div>

                    </div>
                </div>
                <van-loading v-if="showLoading" />
            </div>
        </div>

        <div class="head-menu" v-if="showMenu">
            <img class="menu-arrow" src="../image/menu-arrow.png" />

            <div @click="openGoodsShelves">
                <img src="../image/module/module-15.png" />
                <span>货架查询</span>
            </div>
            <div @click="openConsignmentInventory">
                <img src="../image/module/module-10.png" />
                <span>代销库存</span>
            </div>
            <div @click="openCustomer">
                <img src="../image/module/module-23.png" />
                <span>开通账户</span>
            </div>
        </div>

    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();


        var maps = [
            ['高德地图', 'iosamap://', 'com.autonavi.minimap'],
            ['百度地图', 'baidumap://', 'com.baidu.BaiduMap']
        ];
        var buttons = [];

        var map = api.require('bMap');
        if (api.systemType == 'android') {
			map.setAgreePrivacy({
			agree:true
		});	
		}
        // if (api.systemType == 'ios') {
        map.initMapSDK(function (ret) { });
        // }

        var photoBrowser = api.require('photoBrowser');



        var userInfo = FLD.getUserInfo();
        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                ifConfirm: false,
                serverIP:FLD.serverIP,
                showMenu: false,
                name: api.pageParam.name,
                customerData: '',
                djList: []
            },
            created: function () {
                this.appInstalled();
                this.setCustomerData();
            },
            methods: {
                openBigImg(img) {
                    var that = this;
                    if (!img) {
                        return false;
                    } else {
                        photoBrowser.open({
                            images: ['http://' + that.serverIP + img],
                            bgColor: '#000'
                        }, function (ret) {
                            if (ret) {
                                if (ret.eventType == 'click') {
                                    photoBrowser.close();
                                }
                            }
                        })
                    }
                },
                clickDom(e) {
                    if (!$(e.target).closest('.head-menu').length) {
                        this.showMenu = false;
                    }
                },
                setCustomerData() {
                    var that = this;
                    FLD.ajax('APP_KHXQXXNS', { S_ClientID: api.pageParam.id }, function (res) {
                        // if (res.ds[0].A_Enabled == '是') {
                        //     res.ds[0].A_Enabled = true;
                        // } else {
                        //     res.ds[0].A_Enabled = false;
                        // }
                        that.customerData = res.ds[0];
                        that.customerData.id = that.customerData.ClientID;
                        that.customerData.name = that.customerData.A_ClientName;

                        if (res.ds1.length) {
                            var xData = [], yData = [];

                            for (var i in res.ds1) {
                                xData.push(res.ds1[i].YeFe);
                                yData.push(res.ds1[i].XSMoney);
                            }

                            var chart = echarts.init(document.getElementById('chart'));

                            var option = {
                                tooltip: {
                                    trigger: 'axis'
                                },
                                grid: {
                                    top: '3%',
                                    left: 15,
                                    right: 15,
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: [
                                    {
                                        type: 'category',
                                        data: xData
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value',
                                        name: '元',
                                    }
                                ],
                                series: [
                                    {
                                        type: 'line',
                                        barWidth: 20,
                                        data: yData
                                    }
                                ]
                            };
                            chart.setOption(option);
                        }

                        that.djList = res.ds2;
                    })
                },
                appInstalled(num) {
                    var that = this;
                    if ((num = num ? num : 0) < maps.length) {
                        api.appInstalled({
                            appBundle: api.systemType == 'ios' ? maps[num][1] : maps[num][2]
                        }, function (ret, err) {
                            if (ret.installed) {
                                buttons.push(maps[num][0]);
                                maps[num].push(false);
                            } else {
                                buttons.push(maps[num][0] + ' ( 未安装 )');
                                maps[num].push(true);
                            }
                            that.appInstalled(++num);
                        });
                    }
                },
                openNavigation() {
                    var that = this;

                    if (that.customerData.Longitude && that.customerData.Latitude) {
                        api.actionSheet({
                            buttons: buttons
                        }, function (ret, err) {
                            ret.buttonIndex -= 1;
                            if (ret.buttonIndex == 2) {
                                return false;
                            } if (!maps[ret.buttonIndex][3]) {
                                if (ret.buttonIndex == 0) {
                                    var gd_latlng = that.bd_decrypt(that.customerData.Longitude, that.customerData.Latitude);
                                    if (api.systemType == 'ios') {
                                        location.href = encodeURI('iosamap://path?sourceApplication=福路德&dlat=' + gd_latlng.lat + '&dlon=' + gd_latlng.lng + '&dev=0&t=0');
                                    } else {
                                        location.href = encodeURI('amapuri://route/plan/?sourceApplication=福路德&dlat=' + gd_latlng.lat + '&dlon=' + gd_latlng.lng + '&dev=0&t=0');
                                    }
                                } else if (ret.buttonIndex == 1) {
                                    if (api.systemType == 'ios') {
                                        location.href = encodeURI('baidumap://map/direction?destination=' + that.customerData.Latitude + ',' + that.customerData.Longitude + '&mode=driving&src=ios.baidu.福路德连锁');
                                    } else {
                                        location.href = encodeURI('bdapp://map/direction?destination=' + that.customerData.Latitude + ',' + that.customerData.Longitude + '&mode=driving&src=andr.baidu.福路德连锁');
                                    }
                                }
                            }
                        })
                    } else {
                        layer.open({
                            content: '请先保存客户定位!',
                            skin: 'msg',
                            time: 2
                        });
                    }
                },
                saveCustomerData() {
                    var that = this;
                    var obj = {
                        S_ClientID: that.customerData.id,
                        S_LinkMan: that.customerData.LinkMan,
                        S_Tel: that.customerData.NTel,
                        S_Address: that.customerData.Address,
                        S_Longitude: that.customerData.Longitude,
                        S_Latitude: that.customerData.Latitude,
                        S_Distance: that.customerData.Distance,
                        S_ARName: that.customerData.ARName
                    }
                    FLD.ajax('APP_UPTClientN', obj, function (res) {
                        that.setCustomerListData();
                        layer.open({
                            content: '保存成功!',
                            skin: 'msg',
                            time: 2
                        });
                    })
                },
                bd_decrypt(bd_lng, bd_lat) {
                    var X_PI = 3.14159265358979324 * 3000.0 / 180.0;
                    var x = bd_lng - 0.0065;
                    var y = bd_lat - 0.006;
                    var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
                    var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
                    var gg_lng = z * Math.cos(theta);
                    var gg_lat = z * Math.sin(theta);
                    return { lng: gg_lng, lat: gg_lat }
                },
                openGoodsShelves() {
                    var that = this;
                    that.showMenu = false;
                    api.openWin({
                        name: 'goodsShelves',
                        url: 'goodsShelves.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            clientInfo: that.customerData
                        }
                    })
                },
                openConsignmentInventory() {
                    var that = this;
                    that.showMenu = false;
                    api.openWin({
                        name: 'consignmentInventory',
                        url: 'consignmentInventory.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            clientInfo: that.customerData
                        }
                    })
                },
                openCustomer() {
                    var that = this;
                    that.showMenu = false;
                    this.$dialog.confirm({
                        title: '提示',
                        message: '是否开通此客户?'
                    }).then(() => {
                        that.ifConfirm = true;
                        var obj = {
                            S_ClientID: that.customerData.id,
                            S_BranchID: userInfo.S_BranchID
                        }
                        FLD.ajax('AP_ADClientNI', obj, function (res) {
                            that.ifConfirm = false;
                            if (res.ds[0].status == 500) {
                                layer.open({
                                    content: res.ds[0].msg,
                                    skin: 'msg',
                                    time: 2
                                });
                            } else {
                                that.customerData.IsOPAP = 1;
                                layer.open({
                                    content: '客户启用成功!',
                                    skin: 'msg',
                                    time: 2
                                });
                                that.setCustomerListData();
                            }
                        })

                    }).catch(() => {

                    });

                },
                setCustomerListData() {
                    var that = this;
                    api.sendEvent({
                        name: 'setCustomerListData',
                        extra: {
                            customerData: that.customerData
                        }
                    });
                },
                onClickLeft() {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>